<template>
  <div class="meassage">
    <MyNavBar :gobackShow="false" :title="title" />
    <div class="content">
      <!-- <van-empty description="系统建设中" /> -->
      <div class="type_list">
        <div class="type_li" v-for="item in messageTypeList" :key="item.bulletionType" @click="goToList(item)">
          <div class="li_img">
            <img :src="ImgShow(item.bulletionType)" alt="" />
          </div>
          <div class="li_info">
            <div class="top">
              <div class="name">{{ item.bulletionTypeName }}</div>
              <div class="time">{{ item.showDate }}</div>
            </div>
            <div class="bottom">
              <div class="desc">{{ item.bulletinTypeDetail }}</div>
              <div class="dot" v-if="item.unReadNum > 0">{{ item.unReadNum > 99 ? '99+' : item.unReadNum }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSelectAllBulletinNumByType } from '@api/api.js'
export default {
  name: 'message',
  components: {},
  props: {},
  data() {
    return {
      title: '消息',
      messageTypeList: [
        {
          bulletinTypeDetail: '月小结、季度总结完成通知',
          bulletionType: '01',
          bulletionTypeName: '纪实通知',
          showDate: '',
          totalNum: 0,
          unReadNum: 0,
        },
        // {
        //   bulletinTypeDetail: '月度评价、季度评价通知',
        //   bulletionType: 'ASSESS_NOTICE',
        //   bulletionTypeName: '评议通知',
        //   showDate: '',
        //   totalNum: 0,
        //   unReadNum: 0,
        // },
        // {
        //   bulletinTypeDetail: '系统公告消息',
        //   bulletionType: 'SYSTEM_NOTICE',
        //   bulletionTypeName: '系统公告',
        //   showDate: null,
        //   totalNum: 0,
        //   unReadNum: 0,
        // },
        // { id: 'user', name: '用户通知', desc: '各单位人员变更通知', imgUrl: require('@images/home/system-icon.png'), time: '2021-12-01', dot: 100 },
      ],
      imgList: [
        { type: '01', url: require('@images/home/record-icon.png') },
        { type: 'ASSESS_NOTICE', url: require('@images/home/comment-icon.png') },
        { type: 'SYSTEM_NOTICE', url: require('@images/home/notify-icon.png') },
        { type: 'USER_STATUS_CHANGE', url: require('@images/home/system-icon.png') },
        { type: 'ORG_MODIFY_RANK', url: require('@images/home/comment-icon.png') },
        { type: 'TASK_REMIND', url: require('@images/home/task-iconicon.png') },
        { type: 'PEOPLE_ASSESS', url: require('@images/home/democratic-icon.png') },
        { type: 'PEOPLE_ASSESS_CHECK', url: require('@images/home/democratic-icon.png') },
        { type: 'rckq', url: require('@images/home/notify-icon.png') },
        { type: 'meetingManage', url: require('@images/home/meeting_icon.png') },
        { type: 'TASK_NOTICE_V2', url: require('@images/home/task-iconicon.png') },
      ],
    }
  },
  mounted() {
    this.getSelectAllBulletinNumByType()
  },
  methods: {
    goToList(item) {
      this.$store.commit('setMessageOneNum', item.unReadNum)
      this.$router.push({ path: '/messageList', query: { id: item.bulletionType, name: item.bulletionTypeName } })
    },
    getSelectAllBulletinNumByType() {
      getSelectAllBulletinNumByType().then(res => {
        if (res.status === 200) {
          this.messageTypeList = res.data
          let num = 0
          this.messageTypeList.forEach(item => {
            num += Number(item.unReadNum)
          })
          this.$store.commit('setMessageNum', num)
        }
      })
    },
    ImgShow(type) {
      let arr = this.imgList.filter(item => {
        return item.type === type
      })
      if (arr.length > 0) return arr[0].url
      // return this.imgList.find(item => item.type == type).url || ''
    },
  },
}
</script>
<style lang="scss" scoped>
.meassage {
  padding: 46px 0 50px;
  background-color: #eeeeee;
  height: 100%;
  .content {
    height: 100%;
    overflow: auto;
    padding: 0 16px 16px;
    .type_list {
      .type_li {
        padding: 18px 14px;
        margin-top: 15px;
        background-color: #ffffff;
        box-shadow: 0px 0px 10px 1px rgba(95, 95, 95, 0.1);
        border-radius: 5px;
        display: flex;
        align-items: stretch;
        .li_img {
          margin-right: 10px;
          width: 40px;
          height: 40px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .li_info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .top,
          .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #999999;
          }
          .name {
            // font-size: 14px;
            color: #333333;
          }
          .dot {
            background-color: #ff0000;
            color: #ffffff;
            padding: 0 7px;
            border-radius: 15px;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
